Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 340 | Author: cody 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Custom Slap Toggle MI</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>

<body>

    <div class="container">
        <form class="toggle">
            <input type="radio" id="choice1" name="choice" value="creative">
            <label for="choice1">Frontend</label>

            <input type="radio" id="choice2" name="choice" value="productive">
            <label for="choice2">Backend</label>

            <div id="flap"><span class="content">productive</span></div>
        </form>
    </div>

    <script>
        const st = {};

        st.flap = document.querySelector('#flap');
        st.toggle = document.querySelector('.toggle');

        st.choice1 = document.querySelector('#choice1');
        st.choice2 = document.querySelector('#choice2');

        st.flap.addEventListener('transitionend', () => {

            if (st.choice1.checked) {
                st.toggle.style.transform = 'rotateY(-15deg)';
                setTimeout(() => st.toggle.style.transform = '', 400);
            } else {
                st.toggle.style.transform = 'rotateY(15deg)';
                setTimeout(() => st.toggle.style.transform = '', 400);
            }

        })

        st.clickHandler = (e) => {

            if (e.target.tagName === 'LABEL') {
                setTimeout(() => {
                    st.flap.children[0].textContent = e.target.textContent;
                }, 250);
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            st.flap.children[0].textContent = st.choice2.nextElementSibling.textContent;
        });

        document.addEventListener('click', (e) => st.clickHandler(e));
    </script>

</body>

</html>

Share this file: